<!--商品列表  -->
<template>
  <div class="goods-list">
    <!-- 商品列表的头部 -->
    <!-- 监听事件---接受flag值 -->
    <goods-header @changHeader="changListFun"></goods-header>
    <!-- tab内容 -->
    <goods-tabs @openpopup="listPopFun"></goods-tabs>
    <mt-popup v-model="popupVisible" position="right">
      <div class="goods-transtion">
        <div class="title">价格区间</div>
        <div class="price-wrap">
          <input type="text" placeholder="最低价" />
          <span></span>
          <input type="text" placeholder="最高价" />
        </div>
        <div class="title">品牌</div>
        <div class="container">
          <ul>
            <li class="active">猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
            <li>猫人</li>
          </ul>
        </div>
        <div class="footer">
          <button class="reset">重置</button>
          <button class="ok" @click="closePopFun">确定</button>
        </div>
      </div>
    </mt-popup>
    <!-- 商品列表 -->
    <change-list
      :goodslistDatas="goodslistDatas"
      :listChangeFlag="listChangeFlag"
    ></change-list>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import GoodsHeader from "./GoodsHeader.vue";
import GoodsTabs from "./GoodsTabs.vue";
import ChangeList from "@/components/ChangeList/ChangList.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { GoodsHeader, GoodsTabs, ChangeList },
  data() {
    //这里存放数据
    return {
      popupVisible: false,
      goodslistDatas: [
        {
          id: 1,
          title:
            "苏泊尔（SUPOR）电饭煲家用IH加热4升L大容量2-5人智能预约球釜多功能蒸米饭电饭锅小柴火饭 S",
          goods_thumb:
            "https://img14.360buyimg.com/n1/s300x300_jfs/t1/83624/39/1390/119199/5cfb1b19Efeabd927/1f7e9061fa12f294.jpg",
          shop_price: "529.00",
        },
        {
          id: 2,
          title:
            "华帝【年度旗舰】Huawei/华为 Mate 9 6+128GB 4G智能手机限量抢 麒麟960芯片 徕卡双镜头",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489108266095.jpg",
          shop_price: "2333",
        },
        {
          id: 3,
          title:
            "华帝【年度旗舰】Huawei/华为 Mate 9 6+128GB 4G智能手机限量抢 麒麟960芯片 徕卡双镜头",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489108266095.jpg",
          shop_price: "2333",
        },
        {
          id: 4,
          title:
            "华帝【年度旗舰】Huawei/华为 Mate 9 6+128GB 4G智能手机限量抢 麒麟960芯片 徕卡双镜头",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489108266095.jpg",
          shop_price: "2333",
        },
        {
          id: 5,
          title:
            "华帝【年度旗舰】Huawei/华为 Mate 9 6+128GB 4G智能手机限量抢 麒麟960芯片 徕卡双镜头",
          goods_thumb:
            "https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489108266095.jpg",
          shop_price: "2333",
        },
      ],
      listChangeFlag: true,
    };
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    listPopFun(data) {
      // console.log(data);
      this.popupVisible = data;
    },
    changListFun(data) {
      this.listChangeFlag = data;
    },
    closePopFun() {
      this.popupVisible = false;
    },
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less">
.goods-list {
  .mint-popup {
    width: 90%;
    height: 100%;
    .goods-transtion {
      padding: 1rem;
      .title {
        font-weight: 700;
        font-size: 1.6rem;
      }
      .price-wrap {
        width: calc(100% - 2rem);
        padding: 1rem;
        margin: 1rem 0;
        display: flex;
        height: 4rem;
        justify-content: space-between;
        align-items: center;
        input {
          width: 13.4rem;
          height: 4rem;
          background-color: #f2f2f2;
          border-radius: 2rem;
          text-align: center;
        }
        span {
          width: 1rem;
          height: 0.1rem;
          margin: 0 1rem;
          background-color: #000;
        }
      }
      .container {
        ul {
          display: flex;
          flex-wrap: wrap;
          li {
            width: calc(33% - 0.5rem);
            text-align: center;
            line-height: 3.6rem;
            height: 3.6rem;
            background-color: #f2f2f2;
            border-radius: 2rem;
            font-size: 1.6rem;
            margin: 0.5rem 0.3rem;
          }
          .active {
            border: 0.1rem solid rgba(255, 0, 0, 0.5);
            color: #e93422;
            background-color: #faeeec;
          }
        }
      }
      .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5rem;
        background-color: #fff;

        button {
          width: 40%;
          height: 4rem;
          margin: 0.3rem 5%;
          border-radius: 2rem;
          font-size: 1.6rem;
          box-sizing: border-box;
        }
        .reset {
          border: 1px solid rgb(226, 44, 44);
          color: #e93422;
          background-color: #fff;
        }
        .ok {
          background: linear-gradient(-88deg, #ff4f2e, #f91f28);
          color: #fff;
        }
      }
    }
  }
}
</style>